<template>
  <el-card class="box-card card-header m-t-20">
    <div slot="header" class="clearfix f-medium">
      <i class="el-icon-circle-plus m-r-10 text-c-blue" aria-hidden="true"></i>
      <span>添加管理员</span>
    </div>
    <div class="add-admin">
      <FormCreator ref="addForm" class="admin-form" :config="config" @commit="toAddAdmin" size="mini"
        label-position="left" label-width="80px">
        <template #btn="{ reset, getData }">
          <div class="text-center">
            <el-button type="primary" round @click="getData()">添加管理员</el-button>
            <el-button type="info" round @click="reset()">重置</el-button>
          </div>
        </template>
      </FormCreator>
      <div class="add-img flex-row-center m-b-30">
        <i :class="[
          'fa',
          'fa-user-plus',
          statusFlag == '普通管理员' ? 'text-c-blue' : 'text-c-orange',
        ]" aria-hidden="true"></i>
      </div>
    </div>
  </el-card>
</template>

<script>
import config from '../config/formConfig';
export default {
  name: "AddAdmin",
  data() {
    return {
      config,
      statusFlag: '普通管理员',
    };
  },
  mounted() {
    this.$watch(
      () => this.$refs.addForm.formData.status,
      (val) => {
        this.statusFlag = val;
      }
    )
  },
  methods: {
    // 添加管理员
    toAddAdmin(formData) {
      let { email, password, status, username, phoneNumber } = formData;
      let userData = {
        email,
        password,
        status: status === "超级管理员" ? "super" : "normal",
        username,
        phoneNumber,
      };
      this.$store
        .dispatch("userHandle/toRegister", userData)
        .then(() => {
          this.$Notify(`已添加管理员${username ?? ''}`);
        })
        .catch(() => {
          this.$Notify("请求异常，请稍后再试！", 'error');
        });
    },
  },
};
</script>

<style scoped lang="less">
.add-admin {
  display: flex;
  padding: 0 40px;

  .add-img {
    flex: 1;
    font-size: 200px;
    opacity: 0.3;

    &>i {
      transition: all 0.5s;
    }
  }

  .admin-form {
    flex: 1;
  }
}
</style>